/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/16
 */
import React from 'react';
import { Row, Col, Button, Dropdown, Input, Icon, Menu } from 'antd';
import styles from './OperationBoard.less';

const OperationBoard = () => {
  const ColProps = {
    xs: 24,
    sm: 12,
    style: {
      marginBottom: 16,
    },
  };

  const TwoColProps = {
    ...ColProps,
    xl: 96,
  };

  const exportActionMenus = (
    <Menu>
      <Menu.Item key="downloadTemp">下载模板</Menu.Item>
      <Menu.Item key="import">导入</Menu.Item>
    </Menu>
  );

  return (
    <Row gutter={24} className={styles.operationBoard}>
      <Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} lg={{ span: 24 }}>
        <div className={styles.boardContainer}>
          <div className={styles.leftWrapper}>

            <Dropdown overlay={exportActionMenus}>
              <Button>
                批量导入 <Icon type="down" />
              </Button>
            </Dropdown>
            <Button className={styles.item}>导出</Button>
          </div>
          <div className={styles.rightWrapper}>
            <Input.Search className={styles.item} style={{ width: 250 }} placeholder="搜索：姓名" />
            <Button className={styles.item}>新增团员</Button>
          </div>
        </div>
      </Col>
    </Row>
  );
};

export default OperationBoard;
